<template>
    <div>
        <p @click="count++">count:{{ count }}</p>
        <!-- 使用组件 -->
        <keep-alive>
            <Child></Child>
        </keep-alive>
    </div>
</template>

<script setup>
//组合式api 中的生命周期
// vue3组合式api 中的生命周期特点:
// 01:  去掉了 beforeCreate  和 created 生命周期,其实就是使用setup 替换掉了beforeCreate  和 created
// 02:  从 vue源码中按需导入,并且名字前设置了 'on'
// 注意: 在选项式语法中相同的生命周期只能写一个, 否则会覆盖, 在组合式中可以写多个/
// 因为是函数调用
import {
    onMounted,
    onBeforeMount,
    onUpdated,
    onBeforeUpdate,
    onUnmounted,
    onBeforeUnmount,
    ref, reactive,
    onActivated,
    onDeactivated
} from 'vue'

import Child from '@/components/Child.vue'

const count = ref(0);
// console.log(onBeforeMount);
onBeforeMount(() => {
    console.log('onBeforeMount');
})
onMounted(() => {
    // 执行代码
    console.log('onMounted');
})
onMounted(() => {
    // 执行代码
    console.log('onMounted-1');
})
onBeforeUpdate(() => {
    console.log('onBeforeUpdate');
})
onUpdated(() => {
    console.log('onUpdated');
})
onBeforeUnmount(() => {
    console.log('onBeforeUnmount');
})
onUnmounted(() => {
    console.log('onUnmounted');
})





</script>
<style scoped></style>